<!-- 即将保养 -->
<template>
  <view class="container">
    <!-- header -->
    <FilterNavbar :searchList="searchList" v-model:queryParam="queryParam" @confirm="onFilterNavbarConfirm">
      <template #center>
        <view class="navbar-title"> 即将保养 </view>
      </template>
    </FilterNavbar>
    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <view v-for="record in dataSource" :key="record.id">
          <ve-card :title="'车牌号：' + record.licenseNo" type="blue">
            <ve-cell label="车型">{{ record.modelName }}</ve-cell>
            <ve-cell label="车辆当前所属门店">{{ record.carSiteName }}</ve-cell>
            <ve-cell-val label="车辆当前里程" unit="公里" :value="record.mileage" />
            <ve-cell-val label="预计保养里程" unit="公里" :value="record.expectedMileage" />
            <ve-cell-val label="最近一次保养里程" unit="公里" :value="record.exportMileage" />
            <ve-cell-val label="保养到期日" :value="record.expectedDate" />
            <ve-cell-val label="最近一次保养日期" :value="record.exportDate" />
            <ve-cell-val label="提醒类型" :value="record.warningTypeName" />
            <ve-cell-val label="提醒时间" :value="record.warningTime" />
            <template #footer>
              <view class="card-footer">
                <ve-button
                  v-if="userStore().v_auth('svmsapp:car-maintenance.add')"
                  type="plain"
                  size="mini"
                  status="gray"
                  @click="add(record)"
                  >新增保养</ve-button
                >
              </view>
            </template>
          </ve-card>
        </view>
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import { ref, onMounted, computed } from 'vue'
  import useList from '@/hooks/useList'
  import FilterNavbar from '@/components/FilterNavbar'
  import { userStore } from '@/stores'
  import { onLoad } from '@dcloudio/uni-app'

  const carSiteName = ref('')
  onLoad((options) => {
    const { siteId, siteName } = options
    carSiteName.value = siteName
    queryParam.value.carSiteId = siteId
    uni.$on('getList', () => {
      queryParam.value.pageNumber = 1
      dataSource.value = []
      resetRefresh()
    })
  })
  const add = (record) => {
    uni.navigateTo({ url: `/pages/asset/car-maintenance/form?pageType=create&carId=${record.carId}&origin=home` })
  }
  // 查询参数
  const queryParam = ref({
    siteId: undefined,
    carSiteId: undefined,
    carId: undefined,
    pageSize: 30,
  })
  const searchList = computed(() => {
    return [
      {
        prop: 'carSiteId',
        label: '车辆当前所属门店',
        type: 'remote-select',
        attrs: {
          label: carSiteName.value,
          type: 'sitedataboard',
          params: {
            oldId: queryParam.value.carSiteId,
          },
          change: (form, labelForm, searchList, val) => {
            if (val) {
              searchList.value[1].attrs.params.siteId = val
              form.value.carId = undefined
              labelForm.value.carId = undefined
            } else {
              searchList.value[1].attrs.params.siteId = undefined
              form.value.carId = undefined
              labelForm.value.carId = undefined
            }
          },
        },
      },
      {
        prop: 'carId',
        label: '车牌号',
        type: 'remote-select',
        attrs: {
          type: 'licenseNo',
          params: {
            siteId: queryParam.value.carSiteId,
          },
        },
      },
    ]
  })
  const onFilterNavbarConfirm = (params) => {
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    resetRefresh()
  }
  uni.$on('loadData', function (data) {
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()
  })
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/warning/maintenance/list',
    queryParam,
  )

  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
  }
  .record-list {
    padding: 24rpx;
  }
  .card-footer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .ve-button + .ve-button {
      margin-left: 24rpx;
    }
  }
</style>
